<template>
  <div class="maincontent">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <div style="padding:4px;">
          <div class="maintitle" style="margin-top:40px;">申请规划设计信息</div>
          <div class="construction" v-if="historyData.planningDesignApply">
            <div class="item1">
              <div class="title">土地请查费：</div>
              <div class="value">{{historyData.planningDesignApply.landCheckFee}}万元</div>
            </div>
            <div class="item1">
              <div class="title">可行性研究费：</div>
              <div class="value">{{historyData.planningDesignApply.feasibilityStudyFee}}万元</div>
            </div>
            <div class="item1">
              <div class="title">项目踏勘费：</div>
              <div class="value">{{historyData.planningDesignApply.projectSurveyFee}}万元</div>
            </div>
            <div class="item1">
              <div class="title">规划设计与预算编制费：</div>
              <div class="value">{{historyData.planningDesignApply.designBudgetFee}}万元</div>
            </div>
            <div class="item1">
              <div class="title">规划设计申请书：</div>
              <div class="value">
                <seeFujian
                  v-if="historyData.planningDesignApply.planningDesignFile"
                  @openPdf="seePdf"
                  :file-name="historyData.planningDesignApply.planningDesignFile.fileName"
                  :file-url="historyData.planningDesignApply.planningDesignFile.filePath"
                />
                <!-- <img src="@/assets/third/file.png" style="width:14px;height:16px;margin-right:2px;"/>{{historyData.planningDesignApply.planningDesignFile.fileName}}
                <span style="margin-left:24px;color:#409EFF;cursor:pointer;" @click="seePdf(historyData.planningDesignApply.planningDesignFile.filePath,historyData.planningDesignApply.planningDesignFile.fileName)">查看</span>-->
              </div>
            </div>
          </div>
          <div class="maintitle" style="margin-top:60px;">规划设计条件通知书</div>
          <div class="construction">
            <div class="item1">
              <div class="title">项目规划设计条件书通知书：</div>
              <div
                class="value"
                style="display:flex;align-items:center;"
                v-if="historyData.notifyFile"
              >
                <seeFujian
                  v-if="historyData.notifyFile"
                  @openPdf="seePdf"
                  :file-name="historyData.notifyFile.fileName"
                  :file-url="historyData.notifyFile.filePath"
                />
                <!-- <img src="@/assets/third/file.png" style="width:14px;height:16px;margin-right:2px;"/>{{historyData.notifyFile.fileName}}
                <span style="margin-left:24px;color:#409EFF;cursor:pointer;" @click="seePdf(historyData.notifyFile.filePath,historyData.notifyFile.fileName)">查看</span>-->
              </div>
            </div>
          </div>

          <div class="maintitle" style="margin-top:60px;">申请规划设计市中心意见</div>
          <el-form
            :inline="true"
            label-position="left"
            ref="opinionForm"
            :model="examineOpinion2"
            :rules="opinionFormRule"
            label-width="80px"
          >
            <!-- 1 -->
            <div class="formcontent">
              <el-form-item label="经办人审核意见" label-width="150px" style="display:block;">
                <el-input
                  v-model="examineOpinion0.opinion"
                  :readonly="true"
                  style="width:1000px;"
                  type="textarea"
                  rows="5"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="审查人" style="margin-right:60px;">
                <el-image style="width: 120px; height: 60px" :src="signedPhoto.image0"></el-image>
              </el-form-item>
              <el-form-item label="审查日期">
                <el-date-picker
                  v-model="examineOpinion0.createTime"
                  :readonly="true"
                  type="datetime"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select v-model="examineOpinion0.status" placeholder="请选择" :disabled="true">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- 2 -->
            <div class="formcontent">
              <el-form-item label="处室负责人审查意见" label-width="150px" style="display:block;">
                <el-input
                  v-model="examineOpinion1.opinion"
                  style="width:1000px;"
                  type="textarea"
                  rows="5"
                  :readonly="true"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="审查人" style="margin-right:60px;">
                <el-image style="width: 120px; height: 60px" :src="signedPhoto.image1"></el-image>
              </el-form-item>
              <el-form-item label="审查日期">
                <el-date-picker
                  v-model="examineOpinion1.createTime"
                  type="datetime"
                  :readonly="true"
                  placeholder="请选择"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见">
                <el-select v-model="examineOpinion1.status" placeholder="请选择" :disabled="true">
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- 3 -->
            <div class="formcontent">
              <el-form-item
                label="中心领导审核意见"
                label-width="150px"
                style="display:block;"
                prop="opinion"
              >
                <el-input
                  v-model="examineOpinion2.opinion"
                  style="width:1000px;"
                  placeholder="请输入审查意见"
                  type="textarea"
                  rows="5"
                  :readonly="isCurrentProcess"
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="审查人" style="margin-right:60px;">
                <el-image style="width: 120px; height: 60px" :src="signedPhoto.image2"></el-image>
              </el-form-item>
              <el-form-item label="审查日期" prop="createTime">
                <el-date-picker
                  v-model="examineOpinion2.createTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :readonly="isCurrentProcess"
                  placeholder="请选择"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审查意见" prop="status">
                <el-select
                  v-model="examineOpinion2.status"
                  placeholder="请选择"
                  :disabled="isCurrentProcess"
                >
                  <el-option label="同意" :value="0"></el-option>
                  <el-option label="拒绝" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- btn -->
            <div style="margin-top:40px;">
              <el-form-item>
                <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
                <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审查流程" name="second">
        <process :processData="processData"></process>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import process from "../../public/process";
import {
  getRegPlanningDesignDetail,
  addReviewOpinion,
  examineOpinionList,
  getNotifyDetail
} from "@/api/plannDesign/application";
import { getCheckData } from "@/api/common.js";
import { getInfo } from "@/api/user";
import config from "@/config/index.js";
import moment from "moment";
import seeFujian from "@/components/seeFujian";
export default {
  components: {
    process: process,
    seeFujian
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      projectId: localStorage.getItem("projectId") * 1,
      historyData: {},
      fileList: [],
      planningDesignFile: {},
      activeName: "first",
      examineOpinion0: {},
      examineOpinion1: {},
      examineOpinion2: {
        groupId: 4, // 审查分组
        type: 2, // 审查机构类型
        opinion: "",
        signature: "",
        status: 0,
        createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      },
      beforeOpinions: [],
      processData: {
        groupId: 4,
        projectId: localStorage.getItem("projectId") * 1
      }, // 流程信息
      userInfo: JSON.parse(localStorage.getItem("SET_LOGIN_INFO")), // 获取用户信息
      opinionFormRule: {
        opinion: [
          {
            require: true,
            validator: (rule, value, callback) => {
              if (value.length < 1 || value.length > 200) {
                callback(new Error("请输入意见"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        createTime: [
          {
            require: true,
            validator: (rule, value, callback) => {
              if (value.length < 1 || value.length > 200) {
                callback(new Error("请选择时间"));
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      },
      signedPhoto: {
        image0: "",
        image1: "",
        imgUrl: ""
      }
    };
  },

  created() {
    this._initData();
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") == "APPLY_FOR_PLANNING_AND_CITY_CENTER_2";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  methods: {
    //查看当前PDF
    seePdf(url, name) {
      this.pdfFlag = true;
      this.pdfUrl = url;
      this.pdfName = name;
    },
    onSubmit() {
      let isTrue = false;
      this.$refs["opinionForm"].validate(valid => {
        isTrue = Boolean(valid);
      });
      if (isTrue) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const data = Object.assign(this.examineOpinion2, {
          projectId: this.projectId,
          signature: this.signedPhoto.imgUrl
        });
        addReviewOpinion(data).then(res => {
          loading.close();
          this.$message.success("操作成功");
          this.$router.push("/projectManagement/planningStage/dealwith");
        });
      }
    },
    handleView(filePath) {
      window.open(`${this.$config.baseUrl}${filePath}`);
    },
    handleDownload() {
      window.open(`${this.$config.baseUrl}${this.planningDesignFile.filePath}`);
    },
    // 获取历史数据
    _getHistoryData() {
      getRegPlanningDesignDetail(this.projectId).then(res => {
        this.historyData = res.data;
      });
    },
    _initData() {
      this._getHistoryData();
      this._getCheckData(0).then(res => {
        this.examineOpinion0 = res;
        this.signedPhoto.image0 = config.baseUrlImg + res.signature;
      });
      this._getCheckData(1).then(res => {
        this.examineOpinion1 = res;
        this.signedPhoto.image1 = config.baseUrlImg + res.signature;
      });
      this._getCheckData(2)
        .then(res => {
          this.examineOpinion2 = res;
          this.signedPhoto.image2 = config.baseUrlImg + res.signature;
          this.signedPhoto.imgUrl = res.signature;
        })
        .catch(res => {
          if (res) {
            this.signedPhoto.image2 =
              config.baseUrlImg + this.userInfo.signedPhoto;
            this.signedPhoto.imgUrl = this.userInfo.signedPhoto;
          }
        });
    },
    //获取审查意见
    _getCheckData(type) {
      let params = {
        groupId: 4,
        projectId: this.projectId,
        type: type
      };
      return new Promise((resolve, reject) => {
        getCheckData(params).then(res => {
          if (res.data) {
            resolve(res.data);
          } else {
            reject(true);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  margin: 10px;
  box-sizing: border-box;
  background: #ffffff;
  padding: 20px;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .investmentmsg {
    .totalInvestment {
      width: 250px;
      height: 160px;
      margin-right: 30px;
      float: left;
      position: relative;
      margin-top: 15px;
      .contentbox {
        width: 242px;
        height: 100%;
        background: #f6a924;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-left: 30px;
          padding-top: 30px;
          color: #ffffff;
        }
        .value {
          font-size: 40px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 56px;
          margin-top: 14px;
          color: #ffffff;
          text-align: center;
          span {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 18px;
          }
        }
      }
      .youjiantou {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 30px 0 30px 30px;
        border-style: solid;
        border-color: transparent transparent transparent #f6a924;
        right: 0;
        top: 50%;
        margin-top: -30px;
      }
    }
    .childInvestment {
      width: 480px;
      height: 160px;
      float: left;
      margin-top: 15px;
      .leftbox {
        width: 240px;
        height: 160px;
        float: left;
        border-radius: 4px;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-left: 30px;
          padding-top: 30px;
          color: #ffffff;
        }
        .value {
          font-size: 40px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 56px;
          margin-top: 14px;
          color: #ffffff;
          text-align: center;
          span {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 18px;
          }
        }
      }
      .rightbox {
        width: 240px;
        height: 160px;
        float: left;
        padding-top: 20px;
        padding-left: 30px;
        background: #f3f6f8;
        border-radius: 4px;
        .item-content {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 18px;
          color: #969899;
          margin-bottom: 7px;
        }
      }
    }
  }

  .formcontent {
    margin-top: 30px;
    .secondtitle {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #666666;
      span {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;
        margin-right: 30px;
        color: #a6a6a6;
      }
    }
    .purchaseExpense {
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #666666;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
        margin-right: 60px;
      }
    }
    .allInvestment {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 20px;
      margin-top: 20px;
      color: #333333;
      span {
        font-weight: 500;
      }
    }
  }
  .construction {
    padding-top: 30px;
    .item1 {
      display: flex;
      align-items: center;
      // margin-top: 20px;
      // line-height: 40px;
      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #666666;
        width: 186px;
        text-align: right;
        margin-right: 12px;
      }
      .value {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 42px;
        color: #a6a6a6;
      }
    }
  }
}
</style>
